<template>
  <div>
    <div>
      <img class="bangdanImg" src="../img/bangdan.png" alt="">
    </div>
    <HotMusics
    :paused="$attrs.paused"
    :class="{ current: songId === item.id }"
      v-for="item,i in hotMusics"
      :key="item.id"
      :item="item"
      :indexs="i"
      :isShows="songId==item.id  ? true : false"
      @change-musics-list="$emit('change-musics-list',$event)"
    >
    </HotMusics>
    <div class="bomTxet">
      查看完整榜单&nbsp;＞
    </div>
  </div>
</template>

<script>
import HotMusics from "@/components/HotMusics.vue";
export default {
  props:{
    songId: Number,
  },
  components: {
    HotMusics,
  },
  data() {
    return {
      hotMusics: [],
      indexsShow:true,
    };
  },

  created() {
    this.$axios
      .get(
        "http://localhost:3000/playlist/track/all?id=3778678&limit=30&offset=1"
      )
      .then((res) => {
        this.hotMusics = res.data.songs;
      });
  },
};
</script>

<style lang="scss" scoped>
.bomTxet{
  color: rgb(153, 153, 153);
  width: 110rem;
  height: 55rem;
  line-height: 55rem;
  text-align: center;
  margin: 0 auto;
  font-size: 14rem;
}
.bangdanImg{
  width: 375rem;
  margin-top:-1rem;
}

</style>